<!-- 原子脉冲状态显示器 ，引用于scui-->
<template>
	<view
		class="sc-state w-20 h-20"
		:class="[{ 'sc-status-processing': pulse }, 'sc-state-bg--' + type]"
	></view>
</template>

<script>
	export default {
		props: {
			type: { type: String, default: "primary" },
			pulse: { type: [Boolean, Number], default: true },
		},
	};
</script>

<style lang="scss" scoped>
	.sc-state {
		display: inline-block;
		background: "#409EFF";
		// width: calc(var(--amplified_base) * 30rpx);
		// height: calc(var(--amplified_base) * 30rpx);
		margin: 0 16rpx;
		border-radius: 50%;
		vertical-align: middle;
	}

	.sc-status-processing {
		position: relative;

		&:after {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: inherit;
			content: "";
			animation: warns 1.2s ease-in-out infinite;
		}
	}

	.sc-state-bg--primary {
		background: #409eff;
	}

	.sc-state-bg--success {
		background: #1677ff;
	}

	.sc-state-bg--warning {
		background: #e6a23c;
	}

	.sc-state-bg--danger {
		background: #f56c6c;
	}

	.sc-state-bg--info {
		background: #909399;
	}
	@-webkit-keyframes warns {
		0% {
			transform: scale(0.5);
			opacity: 1;
		}

		30% {
			opacity: 0.7;
		}

		100% {
			transform: scale(2.5);
			opacity: 0;
		}
	}

	@keyframes warns {
		0% {
			transform: scale(0.5);
			opacity: 1;
		}

		30% {
			opacity: 0.7;
		}

		100% {
			transform: scale(2.5);
			opacity: 0;
		}
	}
</style>
